<div id="widget" class="page-layout simple fullwidth docs">

    <!-- HEADER -->
    <div class="header accent p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
        <div fxLayout="column" fxLayoutAlign="center start">
            <div fxLayout="row" fxLayoutAlign="start center">
                <mat-icon class="secondary-text s-18">home</mat-icon>
                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                <span class="secondary-text">Documentation</span>
                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                <span class="secondary-text">Components</span>
            </div>
            <div class="h2 mt-16">Widget</div>
        </div>
    </div>
    <!-- / HEADER -->

    <!-- CONTENT -->
    <div class="content p-24">

        <p>
            <code>fuse-widget</code> is a custom built Fuse component allows to create flippable widget boxes.
        </p>

        <div class="section-title">Sample</div>
        <div>
            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">

                <!-- Front -->
                <div class="fuse-widget-front mat-elevation-z2">
                    <div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
                        <div>Widget title</div>

                        <button mat-icon-button fuseWidgetToggle aria-label="more">
                            <mat-icon>more_vert</mat-icon>
                        </button>
                    </div>

                    <div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center">
                        Widget Content
                    </div>
                </div>
                <!-- / Front -->

                <!-- Back -->
                <div class="fuse-widget-back p-16 pt-32 mat-elevation-z2">
                    <button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
                            aria-label="Flip widget">
                        <mat-icon class="s-16">close</mat-icon>
                    </button>

                    <div>
                        More widget info
                    </div>
                </div>
                <!-- / Back -->

            </fuse-widget>
        </div>

        <div class="section-title">Usage</div>
        <p class="py-8">

            <fuse-highlight lang="html">
                <textarea #source>

                    <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">

                        <!-- Front -->
                        <div class="fuse-widget-front mat-elevation-z2">
                            <div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
                                <div>Widget title</div>

                                <button mat-icon-button fuseWidgetToggle aria-label="more">
                                    <mat-icon>more_vert</mat-icon>
                                </button>
                            </div>

                            <div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center">
                                Widget Content
                            </div>
                        </div>
                        <!-- / Front -->

                        <!-- Back -->
                        <div class="fuse-widget-back p-16 pt-32 mat-elevation-z2">
                            <button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
                                    aria-label="Flip widget">
                                <mat-icon class="s-16">close</mat-icon>
                            </button>

                            <div>
                                More widget info
                            </div>
                        </div>
                        <!-- / Back -->

                    </fuse-widget>

                </textarea>
            </fuse-highlight>

        </p>

    </div>

</div>

